import React, { forwardRef } from 'react';

// CardProps类型定义
interface CardProps extends React.HTMLAttributes<HTMLDivElement> {};

// CardContentProps类型定义
interface CardContentProps extends React.HTMLAttributes<HTMLDivElement> {};

// CardDescriptionProps类型定义
interface CardDescriptionProps extends React.HTMLAttributes<HTMLParagraphElement> {};

// CardFooterProps类型定义
interface CardFooterProps extends React.HTMLAttributes<HTMLDivElement> {};

// CardHeaderProps类型定义
interface CardHeaderProps extends React.HTMLAttributes<HTMLDivElement> {};

// CardTitleProps类型定义
interface CardTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {};

// Card组件
const Card = forwardRef<HTMLDivElement, CardProps>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={`rounded-lg border bg-card text-card-foreground shadow-sm ${className}`}
    {...props}
  />
));

// CardContent组件
const CardContent = forwardRef<HTMLDivElement, CardContentProps>(({ className, ...props }, ref) => (
  <div ref={ref} className={`p-6 ${className}`} {...props} />
));

// CardDescription组件
const CardDescription = forwardRef<HTMLParagraphElement, CardDescriptionProps>(({ className, ...props }, ref) => (
  <p
    ref={ref}
    className={`text-sm text-muted-foreground ${className}`}
    {...props}
  />
));

// CardFooter组件
const CardFooter = forwardRef<HTMLDivElement, CardFooterProps>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={`flex items-center p-6 pt-0 ${className}`}
    {...props}
  />
));

// CardHeader组件
const CardHeader = forwardRef<HTMLDivElement, CardHeaderProps>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={`flex flex-col space-y-1.5 p-6 ${className}`}
    {...props}
  />
));

// CardTitle组件
const CardTitle = forwardRef<HTMLHeadingElement, CardTitleProps>(({ className, ...props }, ref) => (
  <h3
    ref={ref}
    className={`text-2xl font-semibold leading-none tracking-tight ${className}`}
    {...props}
  />
));

// 设置displayName
Card.displayName = 'Card';
CardContent.displayName = 'CardContent';
CardDescription.displayName = 'CardDescription';
CardFooter.displayName = 'CardFooter';
CardHeader.displayName = 'CardHeader';
CardTitle.displayName = 'CardTitle';

export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle };